<template>
  <div class="subscriberecord">
    <c-title text="认购记录"></c-title>
    <header class="header">
      <div>
        <p>{{grand_love_pay}}</p>
        <p>累计已用{{pluginName.love_name}}</p>
      </div>
      <div>
        <p>{{grand_point_pay}}</p>
        <p>累计已用{{pluginName.point_name}}</p>
      </div>
      <div>
        <p>{{grand_love_returned}}</p>
        <p>累计已返{{pluginName.love_name}}</p>
      </div>
      <div>
        <p>{{grand_point_returned}}</p>
        <p>累计已返{{pluginName.point_name}}</p>
      </div>
      <div>
        <p>{{grand_love_surplus}}</p>
        <p>剩余可返{{pluginName.love_name}}</p>
      </div>
      <div>
        <p>{{grand_point_surplus}}</p>
        <p>剩余可返{{pluginName.point_name}}</p>
      </div>
    </header>
    <template v-if="activity_list && activity_list.length>0">
      <keep-alive>
        <activity-box :type="'onself'" :activity_list="activity_list" @activeInfo="activeInfo"></activity-box>
      </keep-alive>
    </template>
    <list
      :loading="loading"
      :text="'暂无认购记录'"
      :datas="listData"
      :noMore="noMore"
      @getMoreData="getMoreData"
    >
      <div class="goods" v-for="(item, i) in listData" :key="i" @click="detail(item.id)">
        <div class="flex">
          <div class="image">
            <img :src="item.thumb" alt />
          </div>
          <div>
            <div>
              <div class="title text-left">{{ item.title }}{{item.round_serial}}轮{{ item.serial }}期</div>
              <div
                class="quota text-left"
                v-if="item.limit_min && item.limit_max"
              >每人限购：{{ item.limit_min }}-{{ item.limit_max }}</div>
              <div class="count-time">
                <p>最近认购时间：{{ item.buy_time }}</p>
                <p style="color: #101010;">认购数量：{{ item.buy_quantity }}</p>
                <p style="color: #101010;">已用{{item.love_pay}}{{pluginName.love_name}},{{item.point_pay}}{{pluginName.point_name}}</p>
              </div>
            </div>
            <template v-if="active_status !==0">
              <van-progress
                :percentage="item.percentage"
                pivot-color="#f14e4e"
                style="width: 10rem;"
              />
            </template>
          </div>
        </div>
        <div class="detail">
          <div>
            <p>总返还</p>
            <p>{{item.point_return}}{{pluginName.point_name}}</p>
            <p>{{item.love_return}}{{pluginName.love_name}}</p>
          </div>
          <div>
            <p>已返还</p>
            <p>{{item.point_returned}}{{pluginName.point_name}}</p>
            <p>{{item.love_returned}}{{pluginName.love_name}}</p>
          </div>
          <div>
            <p>剩余可返</p>
            <p>{{item.point_surplus}}{{pluginName.point_name}}</p>
            <p>{{item.love_surplus}}{{pluginName.love_name}}</p>
          </div>
        </div>
      </div>
    </list>
  </div>
</template>
<script>
import activityBox from "./components/activity";
import mixins from "./components/mixins";
export default {
  mixins: [mixins],
  components: { activityBox },
  data() {
    return {
      active: 2,
      activity_list: [],

      grand_love_pay: 0,
      grand_point_pay: 0,
      grand_love_returned: 0,
      grand_point_returned: 0,
      grand_love_surplus: 0,
      grand_point_surplus: 0,
      pluginName: {}
    };
  },
  activated() {
    //活动数据
    this.getActivityData();
  },
  methods: {
    detail(id){
      this.$router.push(this.fun.getUrl('subscribeRecordDetail',{id}))
    },
    getActivityData() {
      $http.post("plugin.subscription.frontend.modules.member.controllers.activity.index").then(res => {
        if (res.result) {
          this.activity_list = res.data.activity_list;
          this.grand_love_pay = res.data.grand_love_pay;
          this.grand_point_pay = res.data.grand_point_pay;
          this.grand_love_returned = res.data.grand_love_returned;
          this.grand_point_returned = res.data.grand_point_returned;
          this.grand_love_surplus = res.data.grand_love_surplus;
          this.grand_point_surplus = res.data.grand_point_surplus;
          this.pluginName.love_name = res.data.love_name;
          this.pluginName.point_name = res.data.point_name;
        } else {
          this.$toast(res.msg);
        }
      });
    }
  }
};
</script>
<style scoped lang="scss">
.text-left {
  text-align: left;
}

.subscriberecord {
  .flex {
    display: flex;
  }

  .detail {
    display: flex;
    justify-content: space-between;
    text-align: center;
    background-color: #fffaef;
    margin: 0.625rem 0;
    color: #db6706;
    padding: 0 1.0625rem;
    font-size: 0.75rem;

    p {
      margin-top: 0.625rem;
      margin-bottom: 0.625rem;
    }
  }

  .header {
    width: 95%;
    margin: 0.25rem auto;
    background-color: #fdb16a;
    display: flex;
    flex-wrap: wrap;
    color: #fff;
    border-radius: 0.3125rem;

    div {
      width: 50%;
      text-align: center;
      margin-top: 0.875rem;
      margin-bottom: 0.875rem;
    }
  }

  .count-time {
    text-align: left;
    color: #818080;
    font-size: 0.69rem;

    p {
      margin: 0.2rem 0;
    }
  }

  ::v-deep .activity-box {
    margin-top: 0;
  }

  ::v-deep .list-box {
    padding: 0 0.8rem;
  }

  .goods {
    margin: 0.5rem auto;
    background-color: #fff;
    border-radius: 0.31rem;
    padding: 0.63rem;
    // display: flex;
    position: relative;
    overflow: hidden;

    .image {
      width: 5.38rem;
      height: 5.38rem;
      margin-right: 0.4rem;

      img {
        width: 100%;
        height: 100%;
        border-radius: 0.31rem;
      }
    }

    .status {
      position: absolute;
      top: 0;
      right: 0;
      width: 3rem;
      height: 1.5rem;
      line-height: 1.5rem;
      border-radius: 0 0 0 0.31rem;
      color: #fff;
      font-size: 0.63rem;
      text-align: center;
    }

    .status0 {
      background-color: #f14e4e;
    }

    .status1 {
      background-color: #ff8924;
    }

    .title {
      line-height: 1rem;
      font-size: 0.81rem;
      color: #242424;
      width: 13rem;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }

    .quota {
      color: #818080;
      font-size: 0.69rem;
      line-height: 1rem;
      margin: 0.2rem 0;
    }

    .tosubscribe {
      width: 3.13rem;
      height: 1.2rem;
      line-height: 1.2rem;
      background-color: #fb700e;
      border-radius: 0.13rem;
      font-size: 0.69rem;
      color: #fff;
      text-align: center;
    }

    ::v-deep .van-progress {
      margin: 0.4rem 0;

      // display: inline-block;
      .van-progress__pivot {
        line-height: 1.2;
      }

      .van-progress__portion {
        background-color: #f14e4e;
      }

      // .van-progress__pivot {
      //   display: none;
      // }
    }
  }
}
</style>
